<template>

  <div class="DataBoard_container main_container">

    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right">
          <a class="right_setting" @click="setup">
            <svg-icon icon-class="设置" />
          </a>
        </div>
      </div>
    </div>
    <div class="DataBoard_container_main">
      <div class="DataBoard_container_main_statistics">
        <div class="DataBoard_container_main_statistics_container">
          <a v-for="(item,index) in showStatisticsItem" :key="index" class="statistics_item" @click="routeGo(item)">
            <div class="statistics_item_inner">
              <div class="statistics_item_icon" :style="{backgroundColor:item.bgColor}"><svg-icon :icon-class="item.icon" /></div>
              <div class="statistics_item_number">{{ statisticsData[item.dataKey] }}</div>
              <div class="statistics_item_background1" />
              <div class="statistics_item_background" />
              <div class="statistics_item_name">{{ item.name }}</div>
            </div>
          </a>
        </div>
      </div>
      <div class="DataBoard_container_main_charts">
        <div v-for="(item,index) in showChartItem" :key="index" class="charts_item" :class="item.length?'double':''">
          <financingState v-if="item.component=='financingState'" />
          <costDistribution v-if="item.component=='costDistribution'" />
          <clientDebtPermutation v-if="item.component == 'clientDebtPermutation'" />
          <orderProfitSort v-if="item.component=='orderProfitSort'" />
          <clientReceivableParticulars v-if="item.component=='clientReceivableParticulars'" />
          <clientDealWithParticulars v-if="item.component=='clientDealWithParticulars'" />
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import { topFourData } from '@/api/receivableAndPayable/receivableAndPayableManage/receivableBoard' // 接口
import financingState from './components/financingState'
import clientDebtPermutation from './components/clientDebtPermutation.vue'
import orderProfitSort from './components/orderProfitSort.vue'
import costDistribution from './components/costDistribution.vue'
import clientReceivableParticulars from './components/clientReceivableParticulars.vue'
import clientDealWithParticulars from './components/clientDealWithParticulars.vue'
import Setup from './components/Setup'
import { getPageSettings } from '@/api/common/common'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  name: 'DataBoard',
  components: {
    financingState,
    clientDebtPermutation,
    orderProfitSort,
    clientReceivableParticulars,
    clientDealWithParticulars,
    costDistribution
  }, // 组件注册
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  data() {
    return {
      capacityNumber: 100,
      OEENumber: 60,
      timer: undefined,
      id: '',
      statisticsItem: [ // 可选的统计数据项
        { name: '总收入（万元）', icon: '总收入', dataKey: 'addIncome', bgColor: '#C78080', isShow: true },
        { name: '总支出（万元）', icon: '总支出', dataKey: 'addPayment', bgColor: '#80C7C0', isShow: true },
        { name: '利润（万元）', icon: '利润', dataKey: 'profit', bgColor: '#B96F8E', isShow: true },
        { name: '未完结收款单', icon: '未完结收款单', dataKey: 'inCount', bgColor: '#1593EA', isShow: true },
        { name: '未完结付款单', icon: '未完结付款单', dataKey: 'outCount', bgColor: '#836AA8', isShow: true },
        { name: '应收金额（万元）', icon: '应收金额', dataKey: 'inUnPrice', bgColor: '#E7B980', isShow: true },
        { name: '应付金额（万元）', icon: '应付金额', dataKey: 'outUnPrice', bgColor: '#617098', isShow: false }

      ],
      chartItem: [// 可选的图表项
        { name: '财务状况', component: 'financingState', isShow: true },
        { name: '成本分布', component: 'costDistribution', isShow: true },
        { name: '客户欠款排行', component: 'clientDebtPermutation', isShow: true },
        { name: '订单利润排行', component: 'orderProfitSort', isShow: true },
        { name: '客户应收明细', component: 'clientReceivableParticulars', length: '2', isShow: true },
        { name: '客户应付明细', component: 'clientDealWithParticulars', length: '2', isShow: true }
      ],
      statisticsData: {},
      pageId: '财务看板',
      showStatisticsItem: [], // 真正展示的统计数据项
      showChartItem: [] // 真正展示的图表项
    }
  },
  mounted() {
    this.getPageSettings()
    this.getStatisticsData()
    this.timer = setInterval(() => {
      this.getStatisticsData()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 获取顶部统计数据
    getStatisticsData() {
      topFourData().then(res => {
        this.statisticsData = res.data
      })
    },
    // 设置
    setup() {
      // 遍历 chartItem ，如果有新加的 chartItem，但是之前保存的showChartItem 里没有 ，那么它也要传到设置页，不然设置页看不到
      const cacheChartItem = this.$deepClone(this.showChartItem)
      // this.chartItem.forEach(item => {
      //   if (!this.showChartItem.some(item2 => item2.component == item.component)) {
      //     cacheChartItem.push(item)
      //   }
      // })
      // statisticsItem 也一样
      const cacheStatisticsItem = this.$deepClone(this.showStatisticsItem)
      // this.statisticsItem.forEach(item => {
      //   if (!this.showStatisticsItem.some(item2 => item2.dataKey == item.dataKey)) {
      //     cacheStatisticsItem.push(item)
      //   }
      // })
      this.$layer.iframe({
        // 弹框
        content: {
          content: Setup, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            settingData: {
              StatisticsItem: cacheStatisticsItem, // 显示设置的数据
              ChartItem: cacheChartItem, // 字段搜索的数据
              id: this.id,
              pageId: this.pageId // 页面唯一标识
            }
          } // props
        },
        area: ['1000px', '700px'],
        title: '看板设置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    getPageSettings() {
      getPageSettings({ userId: this.userId, pageId: this.pageId }).then(res => {
        if (res.data.json) {
          const pageSetings = res.data.json

          this.showStatisticsItem = pageSetings.StatisticsItem
          this.showChartItem = pageSetings.ChartItem

          this.id = res.data.id
        } else {
          this.showStatisticsItem = this.$deepClone(this.statisticsItem.filter(item => item.isShow))
          this.showChartItem = this.$deepClone(this.chartItem.filter(item => item.isShow))
        }
        this.OEENumber = this.showChartItem.filter(item => item.component == 'TimelyDeliveryRate')[0].number
        // this.capacityNumber = this.showChartItem.filter(item => item.component == 'CapacityStatistics')[0].number
      })
    },
    routeGo(data) {
      let routeData = {} // 跳转过去之后带上的查询参数
      let router = {} // 跳转的路由
      switch (data.dataKey) {
        case 'unFinishSaleOrderSum': // 未完成销售订单
          routeData = {
            statusList: ['4', '5']
          }
          router = '/saleManage/saleOrder'
          break
        case 'willDeliverSum': // 待发货单
          routeData = {
            statusList: ['1']
          }
          router = '/saleManage/saleSend'
          break
        case 'returnSum': // 本月销售退货单
          routeData = {
            returnTime: [moment().startOf('month').format('YYYY-MM-DD') + ' 00:00',
              moment().endOf('months').format('YYYY-MM-DD') + ' 23:59']
          }
          router = '/saleManage/saleReturn'
          break
        case 'overdueSum': // 本月销售逾期订单
          routeData = {
            orderGoodsTime: [moment().startOf('month').format('YYYY-MM-DD') + ' 00:00',
              moment().endOf('months').format('YYYY-MM-DD') + ' 23:59'],
            saleCustomerDeliveryTime: [moment().startOf('month').format('YYYY-MM-DD') + ' 00:00',
              moment().endOf('months').format('YYYY-MM-DD') + ' 23:59'],
            orderTime: [],
            overdueStatus: '1'
          }
          router = '/saleManage/saleReport/saleOrderTrackReport'
          break
      }
      // 查询参数存入 vuex
      this.$store.state.common.routeData = routeData

      // 进行页面跳转
      this.$router.push({ path: router })
    }
  }
}
</script>

<style lang="less" scoped>
.DataBoard_container{
  //box-shadow: inset 0px 0px 12px 0px rgba(29, 65, 134, 0.18);
  background-color: #f7f8fa;
  //background-color: #5a5e66;
  overflow-y: auto;
  .right_setting{
    font-size: 20px;
  }
  .DataBoard_container_main{
    padding: 10px 20px 20px 20px;
  }

  .DataBoard_container_main_statistics{
    width: 100%;
    display: flex;

    .DataBoard_container_main_statistics_container{
      display: flex;flex-wrap: wrap;
      min-width: calc(100% + 20px);
      margin-left: -10px;
    }
    .statistics_item{
      flex: 0 0 16.6667%;
      height: 100px;
      border-radius: 4px;
      .statistics_item_inner{
        margin: 0 10px;
      }

      .statistics_item_background1{
        width: 100%;
        height: 30px;
      }
      .statistics_item_background{
        width: 100%;
        height: 70px;
        background-color: white;
        border-radius: 4px;
      }
      .statistics_item_icon{
        width: 54px;
        height: 54px;
        border-radius: 10px;
        background-color: rgba(255, 201, 201, 1);
        float: left;
        left: 20px;
        position: relative;
        font-size: 26px;
        display: flex;justify-content: center;align-items: center;
      }
      .statistics_item_number{
        float: right;
        right: 20px;
        position: relative;
        color: rgba(51, 51, 51, 1);
        font-size: 36px;
        height: 60px;
        line-height: 60px;
      }
      .statistics_item_name{
        float: right;
        right: 20px;
        position: relative;
        color: rgba(153, 153, 153, 1);
        font-size: 16px;
        top: -35px;
      }
    }

    .statistics_item:hover{
      .statistics_item_background{
        background-color: rgba(56, 123, 252, 0.5);
      }
      .statistics_item_name{
        color: white;
      }
    }

    .statistics_item:first-child{
      margin-left: 0px;
    }
  }

  .DataBoard_container_main_charts{
    width: 100%;
    display: flex;flex-wrap: wrap;justify-content: space-between;

    .charts_item{
      width: calc(50% - 10px);
      background-color: white;
      height: 310px;
      margin-top: 20px;
      border-radius: 4px;
    }
    .charts_item.double{
      width: 100%;
      background-color: white;
      height: 380px;
      margin-top: 20px;
      border-radius: 4px;
    }

  }

}
</style>
